<script setup>
import { ref, reactive, getCurrentInstance, onMounted, defineEmits, watch, defineProps, computed } from "vue"
const { proxy } = getCurrentInstance()

let res=ref()
let len=ref()
let data=ref()
let obj=defineProps(['nums','frees'])
onMounted(async () => {
    console.log(obj.nums);
    res.value = await proxy.$axios("/close")
    data.value=res.value.data.data
    len.value=res.value.data.total
})
watch(obj,async()=>{
    console.log(obj.nums);
    res.value = await proxy.$axios("/close",{params:{pepnums:obj.nums,isfree:obj.frees}})
    data.value=res.value.data.data
    len.value=res.value.data.total
    
})

  let flag=true
  let heart=ref()
  heart.value="heart1"
  let hear=(e,index,x)=>{
    console.log(e.currentTarget);
    let th=e.currentTarget
    if(flag==true){
        flag=!flag
        th.className="heart"

    }else{
        flag=!flag
        th.className="heart1"

    }
     
   
  }
</script>

<template>
    <div>
       <img class="img1" src="../img/text.gif" alt="" />
        <div class="text">
            <div><i>马上就要出门旅行了使用</i>「闪订」筛选条件，查看可即时预订的房源。</div>
            <h2>为您找到{{len}}家住宿</h2>
        </div>
        <div class="allhouse">
                <div className="minbox" v-for="(el,index) in data" :key="index">
                    <img @click="hear($event,index,el.x)" :class="heart" >
                    <img class="pic" :src="el.pictrue" alt="" />
                    <div class="close-text">{{el.name}}·{{el.housetype}}  </div>
                    <p>{{el.miaosu}}</p>
                    <img class="touxiang" :src="el.touxiang" alt="" />
                    <h5>{{el.price}}/晚</h5>
                    <div class="discount">√{{el.discount}}</div>
                </div>
            </div>
    </div>
</template>

<style scoped lang="scss">
      img{ 
        width: 40px;
        height: 40px;
        position: relative;
        top: 70px;
        border-radius: 6px;
      }
    .text{
        position: relative;
        top: 40px;
        left: 50px;
    }
.allhouse {
    width: 100%;
    height: 100%;
    position: relative;
    top: 60px;
    display: flex;
    flex-wrap: wrap;
    
    .minbox {
    width: 18%; height: 400px;
    margin-top: 15px;
    margin-left: 25px;
    position: relative;
    cursor: pointer;
    border: 1px solid rgb(185, 185, 185);
    border-radius: 8px;
    .heart{
        position: absolute;
        top: 0;
        right: 0;
        background-image: url(../img/heart-2.png);
        background-size: 100%;
        z-index: 1;
    }
    .heart1{
        position: absolute;
        top: 0;
        right: 0;
        background-image: url(../img/heart-1.png);
        background-size: 100%;
        z-index: 1;
    }
    .pic{
        width: 100%;
        height: 200px;
        position: absolute;
        top: 0;
       
    }
    .close-text{
        position: absolute;
        top: 210px;
        font-weight: 700px;
        font-size: 12px;
        color: rgb(118, 118, 118);
    }
    .discount{
        position: absolute;
        top:78%;
        right: 2%;
        font-size: 13px;
        color: rgb(118, 118, 118);
        
    }
    p{
        position: absolute;
        top: 220px;
        
    }
    .touxiang{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 260px;
    }
    h5{
        position: absolute;
        top: 290px;
    }
}
   
}

</style>